<template>
  <el-card shadow="never" class="!h-full">
    <template #header>
      <slot name="header"></slot>
    </template>

    <el-descriptions border :column="column">
      <el-descriptions-item
        label="姓名"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.name || '空' }}</el-descriptions-item
      >
      <el-descriptions-item
        label="昵称"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.nickname || '空' }}</el-descriptions-item
      >
      <el-descriptions-item
        label="性别"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.sex == 1 ? '男' : '女' }}</el-descriptions-item
      >
      <el-descriptions-item
        label="年龄"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.sex == 1 ? '男' : '女' }}</el-descriptions-item
      >
      <el-descriptions-item
        label="生日"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.birthday ? formatDate(user.birthday, 'YYYY-MM-DD') : '空' }}</el-descriptions-item
      >
      <el-descriptions-item
        label="手机号"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.mobile || '空' }}</el-descriptions-item
      >
      <el-descriptions-item
        label="手机号1"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ '空' }}</el-descriptions-item
      >
      <el-descriptions-item
        label="成长值"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.experience || 0 }}</el-descriptions-item
      >
      <el-descriptions-item
        label="会员等级"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.levelName || '无' }}</el-descriptions-item
      >
      <el-descriptions-item
        label="付费会员"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.memberShipName || '无' }}</el-descriptions-item
      >

      <el-descriptions-item
        label="推广资格"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.brokerageEnabled ? '有' : '无' }}</el-descriptions-item
      >
      <el-descriptions-item
        label="推荐人"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.spreadName }}</el-descriptions-item
      >
      <el-descriptions-item
        label="状态"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
      >
        <DictText :type="DICT_TYPE.COMMON_STATUS" :value="user.status" />
      </el-descriptions-item>

      <el-descriptions-item
        label="注册 IP"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.registerIp || '无' }}</el-descriptions-item
      >
      <el-descriptions-item
        label="注册渠道"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{
      }}</el-descriptions-item>
      <el-descriptions-item
        label="归属员工"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.employee }}</el-descriptions-item
      >
      <el-descriptions-item
        label="归属门店"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.tenantName }}</el-descriptions-item
      >
      <el-descriptions-item
        label="注册时间"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{
          user.createTime ? formatDate(user.createTime, 'YYYY-MM-DD ') : '空'
        }}</el-descriptions-item
      >
      <el-descriptions-item
        label="上次到店"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{
          user.activeTime ? formatDate(user.activeTime, 'YYYY-MM-DD ') : '空'
        }}</el-descriptions-item
      >

      <el-descriptions-item
        label="最后登录"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{
          user.loginDate ? formatDate(user.loginDate, 'YYYY-MM-DD') : '空'
        }}</el-descriptions-item
      >
      <!-- <el-descriptions-item label="ID" align="left" label-align="left" :label-width="65"  :width="120" >{{
        user.id || '空'
      }}</el-descriptions-item> -->
      <el-descriptions-item
        label="三方绑定"
        align="left"
        label-align="left"
        :label-width="65"
        :span="2"
        :width="120"
      >
        <div class="flex items-left">
          <!-- <el-popover :width="300">
            <template #reference>
              <el-image :src="svg_wx_lite" class="w-16px h-16px" />
            </template>
            <div> UID: </div>
          </el-popover>
          <el-popover :width="300">
            <template #reference>
              <el-image :src="svg_alipay_app" class="w-16px h-16px" />
            </template>
            <div> UID: </div>
          </el-popover> -->
        </div>
      </el-descriptions-item>
      <!-- <el-descriptions-item label="支付宝绑定" align="left" label-align="left" :label-width="65"  :width="120" >
        UID:
      </el-descriptions-item> -->
      <el-descriptions-item
        label="会员分组"
        align="left"
        label-align="left"
        :span="2"
        :label-width="65"
        :width="120"
        >{{ user.groupName }}</el-descriptions-item
      >
      <el-descriptions-item
        label="会员标签"
        align="left"
        label-align="left"
        :span="3"
        :label-width="65"
        :width="120"
        >{{ user.tagNames }}</el-descriptions-item
      >
      <el-descriptions-item
        label="所在地"
        align="left"
        label-align="left"
        :label-width="65"
        :width="120"
        >{{ user.areaName || '无' }}</el-descriptions-item
      >
    </el-descriptions>
    <template #footer>
      <div class="flex items-center">
        <CardTitle title="会员关怀" />
        <el-divider direction="vertical" />
        <!-- 
        状态:{{ user.status }}
        <el-divider direction="vertical" />

        <el-text type="primary" class="cursor-pointer">发送通知 </el-text>
        <el-divider direction="vertical" /> -->

        <el-text type="primary" class="cursor-pointer" @click="openCoupon(user.id)"
          >发送代金券
        </el-text>
      </div>
    </template>
  </el-card>
  <!-- 发送优惠券弹窗 -->
  <CouponSendForm ref="couponSendFormRef" />
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/member/user'
// import svg_alipay_app from '@/assets/svgs/pay/icon/alipay_app.svg'
// import svg_wx_lite from '@/assets/svgs/pay/icon/wx_lite.svg'
import { CouponSendForm } from '@/views/mall/promotion/coupon/components'
import { useHook } from './hook'
import { DICT_TYPE } from '@/utils/dict'

const { user } = defineProps<{ user: UserApi.UserVO }>()

const { matchMedia } = useHook()
const column = ref(6)
const matchType = ref('xl')

const setColumn = () => {
  const type = matchMedia()
  matchType.value = type
  if (type == 'xs') {
    column.value = 1
  } else if (type == 'sm') {
    column.value = 2
  } else if (type == 'md') {
    column.value = 4
  } else if (type == 'lg') {
    column.value = 4
  } else if (type == 'xl') {
    column.value = 7
    // column.value = 6  原来是6
  }
}
/** 发送优惠券 */
const couponSendFormRef = ref()
const openCoupon = (userId) => {
  couponSendFormRef.value.open([userId])
}
window.onresize = () => {
  setColumn()
}
onMounted(() => {
  setColumn()
})
</script>
